<template>
	<div class="favorite-singer">
    <el-divider content-position="left"
			><h2>我关注的歌手({{ singercount }})</h2></el-divider>
		<Singerlist :singerlist="favoriteSinger" />
		<div v-if="favoriteSinger.length == 0">
			<el-empty description="还没有关注的歌手" :image-size="200"></el-empty>
		</div>
	</div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useStore } from 'vuex';
import { getSubSinger } from '@/network/myfavorite/myfavorite';
import Singerlist from '@/components/content/singerlist/Singerlist.vue';


const store = useStore();
const subSingerlist = computed(() => store.getters.subSingerlist);
const favoriteSinger = ref([]);
const singercount = ref(0);

// 获取歌手信息
const getSubSingerBy = async () => {
  try {
    const res = await getSubSinger();
    favoriteSinger.value = res.data.data;
    store.dispatch('saveFavoriteSinger', res.data.data);
  } catch (error) {
    console.error('Error fetching singers:', error);
  }
};


onMounted(() => {
  if (subSingerlist.value.length === 0) {
    getSubSingerBy();
  } else {
    favoriteSinger.value = subSingerlist.value;
    singercount.value = subSingerlist.value.length;
  }
});
</script>



<style lang="less" scoped></style>
